/*
 * 消息页面
 * */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Alert,
    ListView,
    RefreshControl,
    ScrollView,
    TouchableHighlight,
    View
} from 'react-native';

var Swipeout = require('react-native-swipeout');

export default class Messages extends Component {
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3', 'row 4','row 5', 'row 6','row 7', 'row 8','row 9', 'row 10']),
            isRefreshing:false
        };
    }
    _fetchData=()=>{
        Alert.alert('df','dfdfdf');
        this.setState({
            isRefreshing:false
        })
    }

    render() {
        return (
            <View style={styles.container}>
                    <ListView
                        dataSource={this.state.dataSource}
                        renderRow={(rowData) =>
                            <Swipeout
                                right={[
                                    {
                                        text: '删除',
                                        backgroundColor:'blue'

                                    },
                                    {
                                        text: '修改',
                                        backgroundColor:'yellow'
                                    }
                                    ]}
                                autoClose={true}
                            >
                                    <View style={{height:80}}>
                                    <Text>{rowData}</Text>
                                </View>
                            </Swipeout>
                            }
                        renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.isRefreshing}
                                onRefresh={this._fetchData}
                                tintColor='#BB1919'
                                title="Loading..."
                                progressBackgroundColor="#FFFF00"
                            />
                        }
                    />
            </View>

        )
    }
}




const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    navBar: {
        height: 64,
        backgroundColor: '#CCC'
    },
    separator: {
        height: 1,
        backgroundColor: 'red',
    },
    row: {
        padding: 10,
        height: 44,
    }
});


class List extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => <Text>{rowData}</Text>}
                />
            </View>

        )
    }
}

